<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { useGetGoods } from '@/services/pages/order/create'
  import { computed, PropType, ref } from 'vue'
  import { TableInstance } from 'element-plus'
  import { useGetAllGoodTypeOptions } from '@/services/pages/good/useType'
  import { Good } from '../../types'

  const {
    options: goodTypeOptionList,
    getOptionsLoading: getGoodTypeOptionListLoading,
    getOptions: getGoodTypeOptionList,
  } = useGetAllGoodTypeOptions()
  const { goods, goodsTotal, getGoodsParam, getGoodsLoading, getGoods } = useGetGoods()

  defineOptions({
    name: 'CreateRepairGoodList',
  })

  const props = defineProps({
    getListParam: {
      type: Object as PropType<typeof getGoodsParam.value>,
      required: true,
    },
    selectedList: {
      type: Array as PropType<Array<Good>>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'select-good', value: Array<OrderGood>): void
  }>()

  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)
  const tableInstance = ref<TableInstance | null>(null)
  const goodTypeList = computed<
    Array<{ id: string; name: string; childData: Array<GoodTypeOptions> }>
  >(() => {
    return [
      {
        id: '',
        name: '全部',
        childData: [],
      },
      ...goodTypeOptionList.value,
    ]
  })
  const goodTypeTreeProps = {
    children: 'childData',
    label: 'name',
  }
  const selectingGoodTypeId = ref('')

  const getList = async () => {
    if (paginationInstance.value) {
      getGoodsParam.value = props.getListParam
      tableInstance.value && tableInstance.value.clearSelection()
      getGoodsParam.value.limit = paginationInstance.value.size
      getGoodsParam.value.page = paginationInstance.value.current
      await getGoods()
      props.selectedList.forEach((selectedGood) => {
        goods.value.forEach((good) => {
          if (selectedGood.goodId === good.id && selectedGood.goodSpecId === good.specId) {
            tableInstance.value && tableInstance.value.toggleRowSelection(good, true)
          }
        })
      })
    }
  }

  const handleGoodTypeClick = (goodType: GoodTypeOptions) => {
    getGoodsParam.value.typeId = ''
    getGoodsParam.value.typeTwoId = ''
    getGoodsParam.value.typeThreeId = ''

    if (goodType.level === 1) {
      getGoodsParam.value.typeId = goodType.id
    }

    if (goodType.level === 2) {
      getGoodsParam.value.typeTwoId = goodType.id
    }

    if (goodType.level === 3) {
      getGoodsParam.value.typeThreeId = goodType.id
    }
    selectingGoodTypeId.value = goodType.id
    getList()
  }

  const handleTableSelectionChange = (data: Array<OrderGood>) => {
    emits('select-good', data)
  }

  defineExpose({
    getGoodTypeOptionList,
    getList,
  })
</script>

<template>
  <div
    v-loading="getGoodsLoading || getGoodTypeOptionListLoading"
    class="goods-select-good-order-create"
  >
    <div class="sidebar">
      <div class="title"> 产品分类 </div>
      <div class="type-list-wrapper">
        <el-tree :accordion="true" :data="goodTypeList" :props="goodTypeTreeProps" node-key="id">
          <template #default="{ data }">
            <div
              :class="{
                'type-item': true,
                'type-item-active': selectingGoodTypeId === data.id,
              }"
              @click="handleGoodTypeClick(data)"
            >
              <h-tooltip-text :text="data.name" :height="32" :max-width="120" />
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="table-wrapper">
      <div class="table">
        <el-table
          ref="tableInstance"
          :border="true"
          :data="goods"
          height="100%"
          :stripe="true"
          @selection-change="handleTableSelectionChange"
        >
          <!-- 选择 -->
          <el-table-column type="selection" width="50" fixed="left" :align="'center'" />

          <!-- 序号 -->
          <el-table-column type="index" width="50" fixed="left" :align="'center'" label="序号" />

          <!-- 产品编号 -->
          <el-table-column show-overflow-tooltip prop="code" label="产品编号" width="120" />

          <!-- 名称 -->
          <el-table-column show-overflow-tooltip prop="name" label="名称" min-width="120" />

          <!-- 图号 -->
          <el-table-column show-overflow-tooltip prop="model" label="图号" width="100" />

          <!-- 规格 -->
          <el-table-column show-overflow-tooltip prop="specName" label="规格" width="100" />
        </el-table>
      </div>
      <div class="goods-pagination">
        <Pagination
          ref="paginationInstance"
          :list_total="goodsTotal"
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .goods-select-good-order-create {
    display: flex;
    column-gap: 12px;
    height: 99%;

    .sidebar {
      width: 250px;
      height: calc(100% - 40px);
      box-sizing: border-box;
      padding: 0 12px 12px 12px;
      border: 1px solid #ebeef5;
      display: flex;
      flex-direction: column;

      .title {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ebeef5;
        box-sizing: border-box;
        padding-left: 24px;
        font-size: 14px;
        margin-bottom: 5px;
      }

      .type-list-wrapper {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        flex: 1;
        height: 0;
        overflow-y: auto;

        :deep(.el-tree) {
          .el-tree-node__content {
            height: 32px;
            border-radius: 2px;

            .custom-tree-node {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              box-sizing: border-box;
              height: 100%;
            }
          }

          .el-tree-node__content:has(.is_disable) {
            cursor: not-allowed;
          }

          .el-tree-node__content:has(.type-item-active) {
            color: #007cff !important;
            background-color: rgba(0, 123, 255, 0.137254902) !important;

            .el-tree-node__expand-icon {
              color: #007cff !important;
            }
          }
        }
      }
    }

    .table-wrapper {
      flex: 1;
      width: 0;
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .table {
        max-height: calc(100% - 40px);
      }
    }

    .goods-pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
